<template>
	<view class="couponItem w100 flex-row-center"
		:style="{'background': 'url('+couponInfo.image+')','backgroundSize':' cover'}">
		<view class="state-content flex-center" v-if="couponInfo.detail">
			<text class="text" v-if="couponInfo.detail==1">组队</text>
			<text class="text" v-else-if="couponInfo.detail==2">赛事</text>
			<text class="text" v-else-if="couponInfo.detail==3">充值</text>
			<text class="text" v-else-if="couponInfo.detail==4">陪玩</text>
		</view>
		<view class="item-left flex-center">
			<view class="price-box">
				<template v-if="couponInfo.type==1">
					<text class="unit">￥</text>
					<text class="price">{{couponInfo.amount}}</text>
				</template>
				<template v-else-if="couponInfo.type==2">
					<text class="price">{{couponInfo.rate}}</text>
					<text class="unit">折</text>
				</template>
			</view>
			<text class="tips">满{{couponInfo.limit_amount}}可用</text>
		</view>
		<view class="info-box flex">
			<text class="name">{{couponInfo.title}}</text>
			<text class="time" v-if="couponInfo.expires_time_text">有效期：{{couponInfo.expires_time_text}}</text>
			<text class="time" v-else-if="couponInfo.validity">有效期：{{couponInfo.validity}}天</text>
			<view class="rule-box flex-row-center" @click.stop="viewRule(couponInfo)">
				<text class="text">使用规则：{{couponInfo.description}}</text>
				<!-- <up-icon name="arrow-right" color="#A5A6A7" size="28rpx"></up-icon> -->
			</view>
		</view>
		<template>
			<view class="option-box flex-center" v-if="itemType=='useList'">
				<text class="text">去使用</text>
			</view>
			<template v-else-if="itemType=='use'">
				<view class="option-box-ed flex-center" v-if="couponInfo.limit_amount>useCost&&useCost&&couponInfo.detail!=4">
					<text class="text">不可用</text>
				</view>
				<view class="option-box flex-center" v-else @click="toUser">
					<text class="text">立即使用</text>
				</view>
			</template>
			<template v-else>
				<view class="option-box-ed flex-center" v-if="couponInfo.is_amount_end==1">
					<text class="text">领完了</text>
				</view>
				<view class="option-box flex-center" v-else @click="receiveCoupon">
					<text class="text">立即领取</text>
				</view>
			</template>
		</template>
	</view>
</template>

<script setup>
	const props = defineProps({
		couponInfo: {
			type: Object,
			default: () => ({})
		},
		type: {
			type: String,
			default: 'use' // use使用 receive领取 useList 使用列表
		},
		useCost: {
			default: 0 //当前使用得价钱
		}
	});
	const useCost = ref(computed(() => props.useCost))
	const emit = defineEmits(['changeCoupon']);
	const couponInfo = ref(computed(() => props.couponInfo));
	const itemType = ref(computed(() => props.type));
	const receiveCoupon = async () => { //领取优惠券
		const res = await $Api.coupon.receiveCoupon({
			id: couponInfo.value.id
		})
		if (res.code == 1) {
			couponInfo.value.received = 1;
			uni.showToast({
				title: '领取成功',
				icon: 'success'
			})
		} else {
			uni.$u.toast(res.msg)
		}

	}
	const toUser = () => { //使用
		emit('changeCoupon', couponInfo.value)
	}
	const viewRule = (item) => {
		if (!item.description) return
		uni.showModal({
			title: '提示',
			content: item.description,
			success: function(res) {

			}
		});

	}
</script>

<style lang="scss" scoped>
	.couponItem {
		border-radius: 18rpx;
		// background-color: #222528;
		min-height: 180rpx;
		padding: 24rpx 24rpx 24rpx 0;
		justify-content: space-between;
		position: relative;
		overflow: hidden;
		box-shadow: 0rpx 0rpx 20rpx 6rpx rgba(108, 199, 190, 0.38);
		position: relative;

		.state-content {
			border-radius: 18rpx 0 18rpx 0;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
			height: 36rpx;
			width: 120rpx;
			background-color: #fa3534;

			.text {
				font-size: 22rpx;
				color: #fff;
				text-align: center;
				line-height: 36rpx;
			}
		}

		.back-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 180rpx;
			border: 1rpx solid red;
			z-index: -1;
		}

		.item-left {
			flex-shrink: 0;
			flex-direction: column;
			margin-right: 24rpx;
			padding: 24rpx;
			border-right: 1rpx dashed $coupon-price-color;
			box-sizing: border-box;

			.price-box {
				color: $coupon-price-color;

				.unit {
					font-size: 28rpx;
					font-weight: 500;
				}

				.price {
					font-size: 38rpx;
					font-weight: 800;
				}
			}

			.tips {
				color: $coupon-text-color;
				font-size: 26rpx;
				margin-top: 12rpx;
			}
		}


		.info-box {
			justify-content: space-between;
			flex-direction: column;
			height: 100%;
			flex: 1;
			margin-right: 18rpx;

			.name {
				display: block;
				width: 240rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: $coupon-text-color;
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 1;
				overflow: hidden;
			}

			.time {
				font-size: 24rpx;
				color: $coupon-text-color;
				margin-top: 12rpx;
			}

			.rule-box {
				font-size: 24rpx;
				color: $coupon-text-color;
				margin-top: 12rpx;

				.text {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					word-break: break-all;
					-webkit-box-orient: vertical;
				}
			}

		}

		.option-box {
			width: 56rpx;
			height: 100%;
			flex-shrink: 0;
			background: $coupon-btn-color;
			flex-shrink: 0;
			border-radius: 28rpx;
			padding: 20rpx 0;

			.text {
				color: $coupon-btn-text-color;
				word-wrap: normal;
				font-size: 24rpx;
				font-weight: bold;
				letter-spacing: 6rpx;
				writing-mode: vertical-rl;
			}
		}

		.option-box-ed {
			width: 56rpx;
			height: 100%;
			flex-shrink: 0;
			background: $coupon-btned-color;
			flex-shrink: 0;
			border-radius: 28rpx;
			padding: 20rpx 0;

			.text {
				color: $coupon-btned-text-color;
				word-wrap: normal;
				font-size: 24rpx;
				font-weight: bold;
				letter-spacing: 6rpx;
				writing-mode: vertical-rl;
			}
		}
	}
</style>